import React, { useContext, useState, useCallback, useMemo } from 'react';

export const DemoContext = React.createContext(0);
const Comp1 = (props) => {
  const data = useContext(DemoContext);
  console.log('Comp1组件重新渲染啦！');
  return (
    <div>
      <h1>{data}</h1>
    </div>
  )
}

const Comp2 = React.memo((props) => {
  // const data = useContext(DemoContext);
  console.log('Comp2组件重新渲染啦！');
  return (
    <div>
      <h1>Comp2</h1>
      {/* <h1>{data}</h1> */}
    </div>
  )
})
export default function DemoContextComp(props) {
  const [count,setCount] = useState(0);
  // const cb = useCallback(() => {}, []);
  const cb = () => {};

  return ( 
    <DemoContext.Provider value={count}>
      <button onClick={() => setCount(count + 1)}>count + 1</button>
      <Comp1 onClick={cb}/>
      <Comp2 onClick={cb}/>
    </DemoContext.Provider>
  )
}